<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引用Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script type="text/javascript" src="../js/axios.js"></script>
		<script type="text/javascript" src="../js/qs.js"></script>
		<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>

		<link href="../css/zcss/bootstrap-datepicker3.min.css" rel="stylesheet">
		<link href="../css/zcss/switchery.min.css" rel="stylesheet">
		<link href="../css/zcss/bootstrap-clockpicker.min.css" rel="stylesheet">
		<link href="../css/zcss/bootstrap-table.min.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/bootstrap.min.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/bootstrap-select.min.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/core.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/components.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/icons.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/pages.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/responsive.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/sweetalert.min.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/custombox.min.css" rel="stylesheet">
		<link href="../css/zcss/animate.min.css" rel="stylesheet" type="text/css">
		<link href="../css/zcss/css.css" rel="stylesheet" type="text/css">
		<style>
			.el-select .el-input {
				width: 110px;
			}
			
			.el-table .info-row {
				background: #c9e5f5;
			}
		</style>
	</head>

	<body class="fixed-center" style="height: 1000px;">
		<!-- ============================================================== -->
		<!-- 右侧主体内容开始-->
		<!-- ============================================================== -->
		<div class="content-page crm" style="margin: 0;">
			<div class="content" style="margin: 0;">
				<div class="container-fluid" style="min-height: 900px;">
					<div class="row">
						<div id="idid" class="col-sm-12">
							<el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm">

								<!----------------筛选、查询input代码开始-------------------->
								<div id="search">

									<div style="height: 50px; width: 500px; margin: 0 auto;" id="app">
										<el-input placeholder="输入主题" v-model="ruleForm.input" class="input-with-select">
											<el-select v-model="ruleForm.selects" slot="prepend" clearable placeholder="全部数据">
												<!--关怀类型 -->
												<el-option label="客户服务" value="471"></el-option>
												<el-option label="客户投诉" value="472"></el-option>
												<el-option label="客户维修" value="473"></el-option>
												<el-option label="客户关怀" value="474"></el-option>
											</el-select>

											<el-button slot="append" icon="el-icon-search" @click="submitForm('ruleForm')"></el-button>
										</el-input>
									</div>
								</div>
								<!----------------列表-------------------->
								<div id="qlist" style="z-index: 0">

									<div class="row m-t-15 f-s-12" style="height: 35px;">
										<div class="col-sm-6"></div>
										<div class="col-sm-6 text-right" id="boxcreate">
											<el-button class="btn btn-white waves-effect waves-light" type="text" @click="centerDialogVisible = true"> <i class="fa fa-plus-circle m-

r-5">新建</i> </el-button>
											<el-dialog title="QA库" :visible.sync="centerDialogVisible" width="700px" center>
												<iframe src="/qa2"  width="100%" frameborder="0"
										onload="this.height=this.contentWindow.document.body.scrollHeight,this.width = 
this.contentWindow.document.body.scrollWidth">
									</iframe> </el-dialog>
											<el-dialog title="QA库" :visible.sync="centerDialogVisible4" width="700px" center>
												<iframe :src="FrameSrc"  width="100%" frameborder="0"
										onload="this.height=this.contentWindow.document.body.scrollHeight,this.width = 
this.contentWindow.document.body.scrollWidth"></iframe>
											</el-dialog>
										</div>

									</div>
								</div>

								<div class="tab-content p-0">
									<div class="bootstrap-table m-t-10">
										<div class="fixed-table-container overflow-x-auto">

											<table class="table table-bordered table-hover table-z" id="qlist_table">
												<thead>
													<tr>
													

														<th class="th-inner">
															<p>
																<a class="na" href="">ID</a>
															</p>
														</th>
														<th class="th-inner">
															<p align="center">问题</p>
														</th><th class="th-inner">
															<p align="center">答案</p>
														</th>
														<th class="th-inner">
															<p align="center">
																<a class="na" href="">分类</a>
															</p>
														</th>
														<th class="th-inner">
															<p align="center">
																<a class="na">次数</a>
															</p>
														</th>
														<th class="th-inner">
															<p align="center">
																<a class="na">操作</a>
															</p>
														</th>
													</tr>
												</thead>
												<tbody class="bg-white">

													<tr v-for="(qa,i) in tableData">
														<td>
															<p>{{qa.qa_id}}</p>
														</td>
														<td>
															<p align="center">
																<a id="qlist_F2">
																	<i class="fa fa-arrow-circle-right text-blue m-r-5"></i>{{qa.qa_name}}</a>
															</p>
														</td>
														<td>
															<p align="center">{{qa.qa_anwser}}</p>
														</td>
														<td>
															<p align="center">{{qa.type}}</p>
														</td>
														<td>
															<p align="center">{{qa.qa_count}}</p>
														</td>
														<td width="1%" nowrap="">
															<el-button type="text" @click="delgood(qa.qa_id)" icon="el-icon-delete"></el-button>
															&nbsp;
															<el-button icon="el-icon-edit" type="text" @click="editRow(qa.qa_id)"></el-button>
														</td>
													</tr>
												</tbody>
											</table>

										</div>
									</div>

									<div class="row m-t-10">
										<div class="col-sm-3">
								
										</div>

										<div class="col-sm-7">
											&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
											<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="ruleForm.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="ruleForm.pagesize" layout="prev, pager, next, jumper" :total="ruleForm.totalCount"> </el-pagination>
										</div>

										<div class="col-sm-2 text-right" style="text-align: center !important; margin-top: 10px; font-size: 15px; font-weight: bold;">
											<span>QA记录</span> <small class="text-muted font-13">{{ruleForm.totalCount}}条</small>
										</div>
									</div>

								</div>
							</el-form>

						</div>
						<script>
							var vm = new Vue({
								el: "#idid",
								data() {
									return {
										texts: "",
										centerDialogVisible: false,
										centerDialogVisible1: false,
										centerDialogVisible2: false,
										centerDialogVisible3: false,
										centerDialogVisible4: false,
										//表格当前页数据
										tableData: [],
										FrameSrc: "",
										ruleForm: {
											//搜索框
											input: '',
											//下拉条件按钮
											selects: '',
											//默认每页数据量
											pagesize: 10,
											//当前页码
											currentPage: 1,
											//默认数据总数
											totalCount: 0,
										}
									}
								},
								methods: {
									//从服务器读取数据
									loadData: function() {
										var iosnn = this;
										//post提交数据
										axios.post("/afterSale/kehuQa",
											//参数转换
											Qs.stringify(this.ruleForm, {
												arrayFormat: 'brackets'
											})
										).then(function(v) {
											iosnn.tableData = v.data.list;
											iosnn.ruleForm.totalCount = v.data.total;
											console.info(v.data);
										}).catch(function(e) {
										//	alert("出错了" + e);
										});
									},
									handleSizeChange(val) {
										this.ruleForm.pagesize = val;
										console.log(this.ruleForm.pagesize + '条');
										this.ruleFormloadData();
									},
									handleCurrentChange(val) {
										this.ruleForm.currentPage = val;
										console.log(this.ruleForm.currentPage + '当前');
										this.loadData();

									},
									submitForm(formName) {
										//验证方法
										this.$refs[formName].validate((valid) => {
											if(valid) {
												this.loadData();
											} else {
												console.log('error submit!!');
												return false;
											}
										});
									},
									resetForm(formName) {
										this.$refs[formName].resetFields();
									},
									delgood: function(id) {
										var r = confirm("您是否确认删除");
										if(r == true) {
											axios.post("/delQa",
												//参数转换
												Qs.stringify({
													'id': id
												}, {
													arrayFormat: 'brackets'
												})
												//ajax请求成功的回调函数
											).then(function(v) {
												window.location.replace("/getQAty");
											}).catch(function(e) {
												alert("出错了" + e);
											});
										}
									},
									editRow(id) {
										this.centerDialogVisible4 = true;
										this.FrameSrc = "/qaEditor?id=" + id;
									}
								},

								mounted() {
									var news = ${Qaty};
									console.log(news);
									this.tableData = news.list;
									this.ruleForm.totalCount = news.total;
								}

							});
						</script>

	</body>
	<!--UTF8-->

</html>